<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-18 19:26:56
 * @LastEditTime: 2020-05-15 12:24:31
 * @FilePath: \client\src\views\admin\ArticlesManagement.vue
 * @Description: 管理文章页面
 -->

<template>
  <b-container class="main bg-img">
    <b-tabs>
      <b-tab title="文章管理">
        <b-form inline class="mt-10">
          <b-input-group size="sm" prepend="关键词" class="mb-2 mr-sm-2 mb-sm-0">
            <b-form-input size="sm" id="keywords" v-model="keywords"></b-form-input>
          </b-input-group>
          <b-input-group size="sm" prepend="日期" class="mb-2 mr-sm-2 mb-sm-0">
            <b-form-input size="sm" id="date" type="date" v-model="date"></b-form-input>
          </b-input-group>
          <b-input-group size="sm" prepend="分类" class="mb-2 mr-sm-2 mb-sm-0">
            <b-form-input size="sm" id="category" v-model="category"></b-form-input>
          </b-input-group>
          <b-input-group size="sm" prepend="标签" class="mb-2 mr-sm-2 mb-sm-0">
            <b-form-input size="sm" id="tag" v-model="tag"></b-form-input>
          </b-input-group>
          <b-button variant="success" size="sm" class="btn-sub" @click="search()">搜索</b-button>
          <b-button variant="info" size="sm" class="btn-sub" @click="refresh()">刷新</b-button>
        </b-form>

        <!-- 表格 -->
        <b-table head-variant="light" small :items="items" :fields="fields" class="articles">
          <template v-slot:cell(type)="data">
            <b-badge pill variant="primary">{{data.item.type == 1 ? '原创' : '转载'}}</b-badge>
          </template>
          <template v-slot:cell(title)="data">
            <span v-html="data.item.title"></span>
          </template>
          <template v-slot:cell(tags)="data">
            <b-badge pill variant="light" v-for="(tag,index) in data.item.tags" :key="index">{{tag}}</b-badge>
          </template>
          <template v-slot:cell(operation)="data">
            <b-dropdown text="操作" variant="light" size="sm">
              <b-dropdown-item
                :to="{path: '/admin/editor', query: {articleId:data.item.id}, props: true}"
              >修改</b-dropdown-item>
              <b-dropdown-divider></b-dropdown-divider>
              <b-dropdown-item @click="delArticle(data.item.id)">删除</b-dropdown-item>
            </b-dropdown>
          </template>
        </b-table>
        <!-- 分页 -->
        <div class="overflow-auto pagination" v-if="totalPages>1">
          <b-pagination-nav
            :link-gen="linkGen"
            :number-of-pages="totalPages"
            use-router
            :value="currentPage"
          ></b-pagination-nav>
        </div>
      </b-tab>
      <b-tab title="草稿" @click="getDrafts()">
        <b-card v-for="draft in drafts" :key="draft.id">
          <b-link
            :to="{path: '/admin/editor', query: {draftId:draft.id}, props: true}"
          >{{draft.title}}</b-link>
          <span class="pull-right sm-text">
            创建时间：{{draft.gmtCreate}}最后一次编辑：{{draft.gmtUpdate}}
            <b-badge variant="danger" @click="delDraft(draft.id)" class="cursor">删除</b-badge>
          </span>
        </b-card>
      </b-tab>
    </b-tabs>
  </b-container>
</template>

<script>
import url from "@/request/url";
export default {
  name: "ArticlesManagement",
  data() {
    // 标题 分类 标签 评论 访问 发布时间 操作（删除、修改）
    return {
      fields: [
        {
          key: "type",
          label: "类型"
        },
        {
          key: "title",
          label: "标题"
        },
        {
          key: "category",
          label: "分类"
        },
        {
          key: "tags",
          label: "标签"
        },
        {
          key: "gmtUpdate",
          label: "发布时间",
          sortable: true
        },
        {
          key: "comments",
          label: "评论数",
          sortable: true
        },
        {
          key: "views",
          label: "浏览数",
          sortable: true
        },
        {
          key: "operation",
          label: "操作"
        }
      ],
      items: [],
      totalPages: 0,
      currentPage: 1,

      keywords: "",
      date: "",
      category: "",
      tag: "",

      drafts: []
    };
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      this.currentPage = to.query.page || 1;
      this.getArticles();
    }
  },
  methods: {
    linkGen(pageNum) {
      return pageNum === 1 ? "?" : `?page=${pageNum}`;
    },
    delArticle(id) {
      this.$axios.delete(url.admin.articles + id).then(resp => {
        this.getArticles();
        this.$bvToast.toast("文章已删除", {
          title: "提示",
          variant: "success",
          solid: true,
          toaster: "b-toaster-top-center"
        });
      });
    },
    search() {
      this.currentPage = 1;
      this.getArticles();
    },
    refresh() {
      this.keywords = "";
      this.data = "";
      this.category = "";
      this.tag = "";
      this.getArticles();
    },
    getArticles() {
      this.$axios
        .post(url.admin.query, {
          pageNumber: this.currentPage,
          keywords: this.keywords,
          date: this.date,
          category: this.category,
          tag: this.tag
        })
        .then(res => {
          let pageInfo = res.data;
          this.items = pageInfo.data;
          this.currentPage = pageInfo.currentPage;
          this.totalPages = pageInfo.totalPages;
        });
    },
    getDrafts() {
      this.$axios.get(url.admin.draft).then(res => (this.drafts = res.data));
    },
    delDraft(id) {
      this.$axios.delete(url.admin.draft + id).then(res => this.getDrafts());
    }
  },
  created() {
    this.getArticles();
  }
};
</script>

<style scoped>
.card {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.btn-sub {
  margin-left: 5px;
  margin-top: 5px;
}
.articles {
  margin-top: 10px;
}
.sm-text {
  font-size: 13px;
  color: hsl(0, 0%, 53%);
}
.cursor {
  cursor: pointer;
}
</style>